<template>
<div class="container">
  <!-- 展示表名区 -->
  <div class="table-name-area">
    <TableName />
  </div>

  <!-- 图形选择区 -->
  <div class="chart-switcher-area">
    <ChartSwitcher @chart-type-changed="handleChartTypeChange" />
  </div>

  <!-- 设置图例区 -->
  <div class="chart-format-area">
    <ChartFormat @chart-legend-showed="handleChartLegendShowed"
                 @chart-gridline-showed="handleGridlineShowed"
                 @chart-xAxis-showed="handlexAxisShowed" />
  </div>

  <!-- 图像显示区域 -->
  <div class="chart-area">
    <div id="main" style="width: 100%; height: 400px;"></div>
  </div>

  <!-- 选择xy轴区域 -->
  <div class="axis-selector-area">
    <ElementSelector :propertyData="propertyData"
                     @selected-xAxis-element="handlexAxisElement"
                     @selected-yAxis-element="handleyAxisElement" />
  </div>
</div>
</template>
  
  <script>
  import { ref, onMounted } from 'vue';
  import * as echarts from 'echarts';
  import ChartSwitcher from '@/components/ChartSwitcher.vue';
  import ChartFormat from '@/components/ChartFormat.vue';
  import ElementSelector from '@/components/ElementSelector.vue';
  import {showTableService} from'@/api/tableget.js';
  import TableName from '@/components/tableName.vue';
  
  export default {
    components: {
      ChartSwitcher,
      ChartFormat,
      ElementSelector,
      TableName
    },
    setup() {
      const dataset = ref([]);
      const propertyData = ref({});
      const seriesConfig = ref([]);
      const ChartType = ref('bar');
      const gridlineShow = ref(false);
      const showLegend = ref(true);
      const showxAxis = ref(true);
      const xAxisData = ref([]);
      const title = ref('');
      const chartInstance = ref(null);
  
      const table = ref({
      tableName:'t_emp',
      tableType:0
    })
    
  
      const fetchData  = async()=>{
        let result = await showTableService(table.value)
        console.log(result)
        dataset.value = result.data;
        processDataset()
      }
          
  
  
      function processDataset() {
        const properties = Object.keys(dataset.value[0]);
  
        // 创建一个对象来存储每个属性的数据
        const newPropertyData = {};
        properties.forEach(property => {
          newPropertyData[property] = dataset.value.map(item => item[property]);
        });
  
        // 将属性名和对应的值存储在实例变量中
        propertyData.value = newPropertyData;
        console.log(propertyData.value)
  
        // 初始化图表
        drawChart();
      }
  
      function handlexAxisElement(AxisElement) {
        xAxisData.value = { data: propertyData.value[AxisElement] }
        drawChart()
      }
  
      function handleyAxisElement(AxisElement) {
      seriesConfig.value = AxisElement.map(key => ({
        name: key,
        type: ChartType.value,
        data: propertyData.value[key]
      }));
    
      chartInstance.value.clear()
      drawChart()
  }
  
      function handleChartTypeChange(type) {
        seriesConfig.value = seriesConfig.value.map(config => {
      return { ...config, type }; 
    });
        ChartType.value = type;
        console.log(ChartType.value)
        switch (type) {
          case 'line':
            title.value = '折线图';
            break;
          case 'bar':
            title.value = '柱状图';
            break;
          case 'pie':
            title.value = '饼图';
            break;
          case 'scatter':
            title.value = '散点图';
            break;
        }
        drawChart();
      }
  
      function handleGridlineShowed(show) {
        gridlineShow.value = show;
        drawChart();
      }
  
      function handleChartLegendShowed(show) {
        showLegend.value = show;
        drawChart();
      }
  
      function handlexAxisShowed(show) {
        showxAxis.value = show;
        drawChart();
      }
  
      function drawChart() {
        if (!chartInstance.value) {
          chartInstance.value = echarts.init(document.getElementById('main'));
        } 
  
        const option = {
          title: {
            text: title.value,
            left: 'center',
            top: '10',
            textStyle: {
              color: '#3398DB',
              fontSize: 20
            }
          },
          grid: {
            show: gridlineShow.value
          },
          xAxis: {
            show: showxAxis.value,
            data: xAxisData.value
          },
          yAxis: {
            type: 'value'
          },
          series: seriesConfig.value,
          legend: {
            data: seriesConfig.value.map(s => s.name),
            show: showLegend.value,
            bottom: '0%'
          }
        };
        // 更新图表配置
  
        chartInstance.value.setOption(option);
      }
  
      onMounted(() => {
        fetchData();
        drawChart(); // 初始化图表
      });
  
      return {
        dataset,
        propertyData,
        seriesConfig,
        ChartType,
        gridlineShow,
        showLegend,
        showxAxis,
        title,
        handlexAxisElement,
        handleyAxisElement,
        handleChartTypeChange,
        handleGridlineShowed,
        handleChartLegendShowed,
        handlexAxisShowed,
        drawChart,
        chartInstance
      };
    }
  };
  
  </script>
  
  <style>
.container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.table-name-area {
  background-color: #f8f8f8;
  padding: 10px;
  width: 100px; /* 或者使用百分比，取决于具体需求 */
}

.chart-switcher-area {
  background-color: #f0f0f0;
  padding: 10px;
  width: 200px; /* 调整宽度以适应内容 */
}

.chart-area {
  flex-grow: 1;
  background-color: #ffffff;
  padding: 10px;
  position: relative;
}

#main {
  width: 100%;
  height: 400px;
}

.chart-format-area,
.axis-selector-area {
  background-color: #e8e8e8;
  padding: 10px;
  width: 200px; /* 调整宽度以适应内容 */
}

/* 将设置图例区和选择xy轴区域放在同一行 */
.chart-area + .chart-format-area,
.chart-area + .axis-selector-area {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* 设置图例区和选择xy轴区域堆叠在图像显示区域下方 */
.chart-area ~ .chart-format-area,
.chart-area ~ .axis-selector-area {
  flex-grow: 1;
}
  </style>